<template>
  <div>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item
          style="
            width: 100%;
            margin-top: 20px;
            margin-left: 30px;
            margin-bottom: 20px;
            text-align: center;
          "
        >
          <div style="float: left; margin-left: 10px; width: 300px">
            <el-input
              placeholder="请输入姓名/科室名称"
              v-model="keyword"
            ></el-input>
          </div>
          <el-button-group style="margin-left: 20px">
            <el-button
              type="primary"
              @click="selByCondition"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button type="success" @click="reload" icon="el-icon-check"
              >所有</el-button
            >
            <el-button type="primary" @click="addDepartment" icon="el-icon-edit"
              >增加</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      :data="tabledata"
      tooltip-effect="dark"
      style="width: 90%; margin: 20px auto"
    >
      <el-table-column
        type="index"
        :index="indexMethod"
        label="ID"
        style="width: auto"
      ></el-table-column>
      <el-table-column
        prop="dname"
        label="科室名称"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        prop="se.sname"
        label="科室负责人"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        prop="se.gender"
        label="性别"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column
        prop="ur2.phone"
        label="负责人电话"
        show-overflow-tooltip
        style="width: auto"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" style="width: auto">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-setting"
            type="danger"
            @click="softdel(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加模态框开始 -->
    <el-dialog title="添加科室" :visible.sync="addVisable">
      <el-form ref="addForm" :model="addForm" label-width="100px">
        <el-form-item label="医院名称">
          <el-input v-model="hname" :disabled="true"> </el-input>
        </el-form-item>
        <el-form-item label="科室名称">
          <el-input v-model="addForm.dname"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisable = false">取 消</el-button>
        <el-button type="primary" @click="saveAddDepartment">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加模态框结束 -->
  </div>
</template>
<script>
import {
  getDepartmentList,
  softdelete,
  getByCondition,
  addDepartments,
} from "@/api/departmentInfo";
export default {
  data() {
    return {
      tabledata: [],
      keyword: "",
      hname: "",
      addVisable: false,
      addForm: {
        hid:this.hid
      },
    };
  },

  methods: {
    loadDepartments() {
      getDepartmentList().then((res) => {
        if (res.data.code == 200) {
          this.tabledata = res.data.data;
          this.hname = res.data.data[0].hs.hname;
        }
      });
    },
    reload() {
      this.loadDepartments();
    },
    selByCondition() {
      getByCondition({
        headers: { "Content-Type": "application/json" },
        keyword: this.keyword,
      }).then((res) => {
        if (res.data.code == 200) {
          this.tabledata = res.data.data;
          this.keyword = "";
        }
      });
    },
    addDepartment() {
      this.addVisable = true;
      this.addForm = {};
    },
    saveAddDepartment() {
      addDepartments(this.addForm ).then((res) => {
        if (res.data.code == 200) {
          this.tabledata = res.data.data;
          this.addForm={};
          this.addVisable = false;
          this.loadDepartments();
        } else {
          alert("已存在,请重新添加！");
        }
      });
    },
    indexMethod(index) {
      return index * 1 + 1;
    },
    softdel(row) {
      softdelete(row.did).then((res) => {
        if (res.data.code == 200) {
          alert("删除成功！");
          this.loadDepartments();
        } else {
          alert("系统异常，稍后重试！");
        }
      });
    },
  },
  mounted() {
    this.loadDepartments();
  },
};
</script>
